<template>
    <div class="v-title">
      <span class="line"></span>
      <div class="title-content">
        {{text}}
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      props: {
        text: {
          type: String,
          default: '请在父组件中绑定标题名称！'
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-title
    width 100%
    display inline-flex
    align-items center
    .line
      display inline-block
      margin-right 16px
      width 4px
      height 32px
      background #2ECC40
    .title-content
      font-size 32px
      color #333
</style>
